<script setup>
import { ref } from 'vue'
import { toRaw } from '@vue/reactivity'
import {reqStaffDetail} from '@/api'
import {staffTip} from '@/data'
const form = ref({})
const show = async(id)=>{
  // const r = await reqStaffDetail({staffId:id})
  // if(r){
  //   form.value = r.data
	// 	console.log(form.value)
  // }
	reqStaffDetail({staffId:id}).then(res=>{
		form.value = res.data
		console.log(form.value)
	})
}
defineExpose({
  show
})
</script>
<template>
	<div class="app-flex-2" v-if="form">
     <el-card style="margin-right: 16px;width:calc(100% - 460px)">
      <div style="height:118px" class="app-flex-left">

    
      <el-avatar
										class="cho-margin"
										shape="square"
										:size="80"
										:src="form.avatar"
									/>
									<div class="cho-margin" style="margin-left:16px">
										<div style="font-size:18px;font-weight:600">{{ form.name }}</div>
										<div v-if="form.department">
												<el-tag  v-for="(item,index) in form.department" :key="index" style="margin-top:8px;margin-right:4px;padding:14px 8px;">{{ item.department_name }}</el-tag>
										</div>
									</div>
                </div>
     </el-card>

        <el-card>
          <el-tag class="app-blue-card" style="background-color: #fff;border:none">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
							<div class="app-card-desc">客户总数</div>
						<div class="app-card-title-num">{{form.customer_number}}<span class="app-card-title-per">人</span></div>
					</div>
					<div class="app-card-item">
						<div class="app-card-item">
							<div class="app-card-desc">今日新增</div>
						<div class="app-card-title-num">{{form.today_new}}<span class="app-card-title-per">人</span></div>
					</div>
					</div>
					</div>
				</el-tag>
        </el-card>

				
			
		
	</div>
	<el-card class="app-gap-block-top">
			<div class="app-flex-left"><span class="app-words-2 app-flex-left"
					><span style="font-size:18px;font-weight:600">联系客户统计</span>
        </span><span class="app-words-tip-weak app-gap-words-left app-flex-left">统计说明
				<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container pop-max-width">
									<div v-for="(item,index) in staffTip" :key="index">{{item}}</div>
									</div>
									<template #reference>
										<MyIcon class="question-icon" name="Question" />
									</template>
								</el-popover></span></div>
<el-tag class="app-blue-card app-gap-block-top" style="width:860px" v-if="form.behaviorData">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
						<div class="app-card-title">{{form.behaviorData.chat_cnt}}</div>
						<div class="app-card-desc">昨日聊天总数（条）</div>
					</div>
					<div class="app-card-item app-border-right">
						<div class="app-card-title">{{form.behaviorData.message_cnt}}</div>
						<div class="app-card-desc">昨日发送消息数（条）</div>
					</div>
					<div class="app-card-item app-border-right">
						<div class="app-card-title">{{form.behaviorData.reply_percentage||0}}</div>
						<div class="app-card-desc">昨日回复聊天占比（%）</div>
					</div>
				

					<div class="app-card-item">
						<div class="app-card-item">
						<div class="app-card-title">{{form.behaviorData.avg_reply_time || 0}}</div>
						<div class="app-card-desc">昨日平均首次回复时长（分钟）</div>
					</div>
					</div>
					</div>
				</el-tag>
			</el-card>
</template>
<style lang="scss">
@import url('../../../../style/app-component.scss');
.el-page-header {
  display:none;
}
</style>
<style lang="scss" scope>
	.app-card-item{
		width:220px !important;
	}
</style>
